<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动塌陷</title>
    <style>
        body {
            margin: 0 auto;
        }

        div {
            width: 300px;
            padding: 10px;
            background: #fae8c8;
            /*什么是BFC？
BFC（块格式化上下文 (Block Formatting Context)）是一个独立的布局环境，其中的元素布局是不受外界的影响，
并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
BFC的原理（渲染规则）：
1.垂直方向发生重叠
2.BFC的区域不会与box重叠（因此可以用来清除浮动）
3.BFC是一个独立的容器，外面的元素不会影响里面的元素，反之，里面的元素也不会影响外面的元素
4.计算BFC的高度时，浮动元素不参与计算
*/
            /*创建bfc*/
            /*bfc1*/
            /*overflow: auto;*/
            /*bfc2*/
            /*overflow: hidden;*/
            /*bfc3,影响布局，比较局限*/
            /*float: right;*/
        }

        div span {
            display: inline-block;
            width: 25%;
            /*对元素设置浮动后，元素会脱离文档流。若包含块没有设置高度，或者高度为自适应的时候，浮动元素的高度就不会被计算进去。
            相当于没有可以展开的内容，包含块的高度不能撑起来，形成塌陷的状态。最简单的方法是设置父级块的高度，但如果不知道后期会
            增加多少子模块，就不利于维护，因此不建议。浮动产生的塌陷，最好还是使用清除浮动*/
            float: left;
        }

        /*最为推荐*/
        .div1::after {
            content: "";
            display: block;
            clear: both;
        }

        /* p{
             color:white;
             background:lightblue;
             text-align: center;
             !*这种解决方式有点浪费资源*!
             clear: both;
         }*/
    </style>
</head>
<body>
<div class="div1">
    <h2><a class="title1">求职简历</a></h2>
    <span><a>销售</a></span>
    <span><a>导购 </a></span>
    <span><a>厨师</a></span>
    <span><a>厨师</a></span>
    <span><a>厨师</a></span>
    <span><a>厨师</a></span>
    <span><a>厨师</a></span>
    <span><a>厨师</a></span>
    <span><a>厨师</a></span>
    <span><a>厨师</a></span>
    <span><a>厨师</a></span>
    <span><a>厨师</a></span>
    <span><a>厨师</a></span>
    <span><a>厨师</a></span>
    <span><a>厨师</a></span>
    <span><a>厨师</a></span>
    <span><a>厨师</a></span>
    <!--为了清除浮动，这里要使用块级元素-->
    <!--    <p>clear浮动</p>-->
</div>
</body>
</html>